<template>
    <div>
        <div style="float:left;margin-right:20px">
        <Button type="primary" shape="circle" @click="onAdd">添加数据</Button>
        <Button type="primary" shape="circle" @click="deleteSelection">删除所选</Button>
        </div>
        <div style="width:400px;display:inline-block;">
        <Input v-model="filter.keyWords">
        <Button slot="append" type="primary" icon="ios-search" @click="searchData"></Button>
        </Input></div>
        <Table border :columns="columns7" :data="filter.data" @on-selection-change="onSelectionChange"></Table>
        <Page :total="filter.total" size="small" show-total show-elevator show-sizer
        @on-change="onChange" @on-page-size-change="onPageSizeChange"></Page>
        <Modal
                v-model="modal"
                title="数据操作"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" style="margin-right:50px">
                <FormItem label="用户名" prop="username">
                    <Input v-model="formValidate.username"  placeholder="请输入用户名"></Input>
                </FormItem>
                <FormItem label="密码"  prop="password">
                    <Input v-model="formValidate.password" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem label="年龄" prop="age">
                    <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
                </FormItem>
                <FormItem label="地址"  prop="address">
                    <Select v-model="formValidate.address"  placeholder="请选择">
                        <Option value="beijing">北京市</Option>
                        <Option value="shanghai">上海市</Option>
                        <Option value="shenzhen">深圳市</Option>
                    </Select>
                </FormItem>
                <FormItem label="性别" prop="gender">
                    <RadioGroup v-model="formValidate.gender">
                        <Radio label="male">男</Radio>
                        <Radio label="female">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
	import base from '../base/base';
	export default {
		mixins:[base],
		data () {
			return {
				module:'users',
				columns7: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '姓名',
						key: 'username',
						render: (h, params) => {
							return h('div', [
								h('Icon', {
									props: {
										type: 'person'
									}
								}),
								h('strong', params.row.username)
							]);
						}
					},
                    {
                    	title:'密码',
                        key:'password'
                    },
					{
						title: '年龄',
						key: 'age'
					},
					{
						title: '地址',
						key: 'address'
					},
					{
						title: '性别',
						key: 'gender'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.row)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
//											console.log(params.row._id);
											this.remove(params.row._id)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				ruleValidate: {
					username: [
						{ required: true, message: '用户名不能为空', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '密码不能为空', trigger: 'blur' }
					],
					age: [
						{ required: true, message: '年龄不能为空', trigger: 'blur' }
					],
					address: [
						{ required: true, message: '请选择城市', trigger: 'change' }
					],
					gender: [
						{ required: true, message: '请选择性别', trigger: 'change' }
					],
				}
			}
		}
	}
</script>